<template>
  <div
    ref="myChart"
    :style="{ width: '100%', height: 'calc(100vh - 120px)' }"
  ></div>
</template>

<script lang="ts">
import { ref } from "vue";
import * as echarts from "echarts";
import {
  get,
  post,
  del,
  put,
  postFormData,
  getBlob,
} from "../../../common/request";
export default {
  name: "Home",
  setup() {
    const myChart = ref<HTMLElement>(); //也可以用const myChart = ref<any>();
    const myCharts = ref<any>();

    let xdata = [];
    let sdata = [];

    const getStatistics = () => {
      get("/statistics/manage/statistics").then((res) => {
        for (let obj in res.data) {
          xdata.push(res.data[obj]["or_time"]);
          sdata.push(res.data[obj]["or_sum"]);
        }
      });
      mc();
    };

    function mc() {
      setTimeout(() => {
        // 绘制图表
        myCharts.value = echarts.init(myChart.value!);
        myCharts.value.setOption({
          title: { text: "近七天销量统计" },
          tooltip: {},
          xAxis: {
            // data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
            data: xdata,
          },
          yAxis: {},
          series: [
            {
              name: "销售额",
              type: "line",
              // data: [5, 20, 36, 10, 10, 20],
              data: sdata,
            },
          ],
        });
      }, 1000);
    }
    getStatistics();

    return {
      myChart,
    };
  },
};
</script>